<template>
  <div class="App">
    <div>{{ message }}</div>
    <button @click="foo">点击foo</button>
    <div>{{ abc }}</div>
    <ref-active id="abc" class="abcd"
    @abcsd="abcg"></ref-active>
    <Custom></Custom>
    <computed_com></computed_com>
    <hr>
    <watch-effect></watch-effect>
    <ref-com></ref-com>
    <Watch></Watch>
    <hr>
    <live-com v-if="show">
      <button @click="xciao">销毁组件</button>
    </live-com>
    <provide-c></provide-c>
    <CountApi1></CountApi1>
    <hr>
    <scrollc/>
    <hr>
    <top-setup></top-setup>
    <zhilin></zhilin>
    <hr>
    <timer/>
    <hr>
    <teleport-1/>
  </div>
</template>

<script>
import { dataMinxs } from './mixins/dataminx'
import RefActive from './components/Refeactive.vue'
import Custom from './components/CustomRef.vue'
// eslint-disable-next-line camelcase
import {
  // eslint-disable-next-line camelcase
  computed_com,
  WatchEffect,
  RefCom,
  Watch,
  LiveCom,
  ProvideC,
  CountApi1,
  scrollc,
  TopSetup,
  zhilin,
  timer,
  Teleport1
} from './components'
export default {
  mixins: [dataMinxs],
  data () {
    return {
      title: 'hello title',
      message: 'hello App',
      show: true
    }
  },
  components: {
    // Home
    RefActive,
    Custom,
    // eslint-disable-next-line vue/no-unused-components
    computed_com,
    WatchEffect,
    RefCom,
    Watch,
    LiveCom,
    ProvideC,
    CountApi1,
    scrollc,
    TopSetup,
    zhilin,
    timer,
    Teleport1
  },
  methods: {
    foo () {
      console.log('组件中的foo方法。。。')
    },
    abcg () {
      console.warn('abcd.....')
    },
    xciao () {
      this.show = false
    }
  },
  created () {
    console.warn('组件的 created ')
  },
  mounted () {
    console.log('this.$name', this.$name)
  },
  computed: {
    abc () {
      return '345'
    }
  },
  name: 'App'
}
</script>

<style scoped>
.App {
  width: 3000px;
  height: 10000px;
  overflow: auto;
}
</style>
